<template>
    <div>
        <van-divider>报修登记</van-divider>
        <van-form @submit="onSubmit">
            <van-field
                v-model="repairsForm.username"
                name="住户姓名"
                label="住户姓名"
                placeholder="住户姓名"
                :rules="[{ required: true, message: '请填写您的姓名' }]"
            />
            <van-field
                v-model="repairsForm.phone"
                type="phone"
                name="联系方式"
                label="联系方式"
                placeholder="联系方式"
                :rules="[{ required: true, message: '请填写联系方式' }]"
            />
            <van-field
                v-model="repairsForm.address"
                type="address"
                name="住址"
                label="住址"
                placeholder="住址"
                :rules="[{ required: true, message: '请填写住址' }]"
            />
            <van-field
                v-model="repairsForm.Calendar"
                type="Calendar"
                name="报修日期"
                label="报修日期"
                placeholder="日期"
                :rules="[{ required: true, message: '请填写日期' }]"
            />
            <van-field
                v-model="repairsForm.columns"
                type="columns"
                name="报修选项"
                label="报修选项"
                placeholder="选项"
                :rules="[{ required: true, message: '请填写报修选项' }]"
            />
            <!-- <van-field
                readonly
                clickable
                label="报修选项"
                :value="repairsForm.value"
                placeholder="选择报修内容"
                @click="repairsForm.showPicker = true"
                />
            <van-popup v-model="repairsForm.showPicker" round position="bottom">
                <van-picker
                        show-toolbar
                        :columns="repairsForm.columns"
                        @cancel="repairsForm.showPicker = false"
                        @confirm="onConfirm1"
                />
            </van-popup> -->
                    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="volume-o">
                    "温馨提示：目前可提供服务有电梯安维, 供暖中断, 网络中断, 水路疏通, 管道维护, 家政清洁, 空调清洗, 马桶疏通"
                    </van-notice-bar>
            <van-field
                v-model="repairsForm.message"
                rows="4"
                autosize
                label="报修内容"
                type="textarea"
                maxlength="100"
                placeholder="请输入"
                show-word-limit
            />
            <van-field name="radio" label="紧急度">
                <template #input>
                    <van-radio-group v-model="repairsForm.radio" direction="horizontal">
                    <van-radio name="一般">一般</van-radio>
                    <van-radio name="紧急">紧急</van-radio>
                    <van-radio name="特急">特急</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="aa">提交</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
export default {
  data() {
    return {
        repairsForm:{
            username: '',
            phone: '',
            address: '',
            message: '',
            radio: '1',
            // uploader: [],
            // showPicker: false,
            columns: '',
            Calendar: '',
        }

    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    onConfirm1(value) {
      this.repairsForm.value = value;
      this.repairsForm.showPicker = false;
    },
    aa(){
      this.$axios
        .post('/RepairsForm/addOne',this.repairsForm)
        .then(res=>{ //提交成功
            if(res.data.code == 1){
                alert("提交成功")
                this.$router.push("/repform");
            }else if(res.data.code == 0){
                alert("提交失败")
                this.$router.push("/repairs");
            }
        })
        .catch(error=>{
            console.log(error);
        });
    },
  },
};
</script>
